<template>
<div class="game-position">
  <div class='header'>
	<div class='part1'>股票代码</div>
	<div class='part2'>持仓成本</div>
	<div class='part3'>持仓数量</div>
	<div class='part4'>现价</div>
	<div class='part5'>仓位</div>
  </div>	
  <gj-loadmore :bottom-method="loadBottom" :bottomPullText="bottomPullText" ref="loadmore">

  <div v-for="item in list">
	  <div id="index">
           <div class="stock-detail" @click="toQuotation(item)">
               <div class='part1'>
                    <div class="stock-name" v-text="item.stock_name"></div>
                    <div class="stock-code" v-text="item.exchange_type + item.stock_code"></div>                 
               </div>
               <div class='part2 text-middle' v-text='Number(item.keep_cost_price).toFixed(2)'></div>
               <div class='part3 text-middle' v-text='Number(item.current_vol)'></div>
               <div class='part4 text-middle' v-text="Number(item.last_price).toFixed(2) ||  '--'"></div>
               <div class='part5 text-middle' v-text="Number(item.position).toFixed(2) + '%'||  '--'"></div>
           </div>          
           <div class="grey-line-long-second"></div>
    </div>
  </div>
  
  <!----  报错的信息   ------->
  <div v-if="showError" class="error" v-text="errorMessage"></div>

 </gj-loadmore>  
 </div>

	
</template>
   
<script>
import currentPositionMixin from './mixins/currentPositionMixin'
export default {
  name: 'currentPositionMixin',
  mixins: [currentPositionMixin]  	
}
</script>

<style style lang="less" scoped>
@basePicUrl: '../../../assets/images';
	.stock-detail{
    padding: 10px 10px 10px 18px;
    display:flex;
    align-items:center;
	justify-content:center;
	color:#565656;
}
.stock-code{
    color:#999999;
    font-size:1.1rem;
}
.grey-line-long-second{
    width:100%;
    height:0.8px;
    background-color: #E7E7E7;
}
.game-position{
  padding-bottom:50%;
  background-image: url('@{basePicUrl}/team/wulin/self-detail-pos-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: -33px;
}
.error{
	width:100%;
	height:40px;
	text-align: center;
	font-size:15px;
	margin-top: 25%;
}
.game-position  .stock-name{
    color:#565656;
    font-size:1.5rem;
}
.game-position .header{
	display:flex;
	background-color: #F1F3F6;
	border-bottom: 0.5px solid #E7E7E7;
	padding: 5px 20px 5px 20px;
	font-size:12px;
	color:#999999;
}
.header .part1{
	flex:1.8;
}
.stock-detail .part3, .stock-detail .part4{
    flex:1.4;
}
.header	.part2{
	flex:1.5
}
.header	.part3, .stock-detail .part1{
	flex:1.6;
}
.header	.part4, .header	.part5, .stock-detail .part5{
    flex:1;
}
.stock-detail .part2{
	flex:1.3;
}
.text-middle{
	text-align: center;
}
.sell-out{
	text-align: center;
    width:15%;
    margin:0 2% 0 3%;
    background-color:#1BAFEC;
    color:#fff;
    border-radius: 5px;
    padding:3px 2px 3px 2px;
    font-size: 1.2rem;
}
</style>